/*
 * Copyright 2012 Clement Sannicolo <clement.sannicolo@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

Ext.define('Ext.ux.highcharts.Donut',
{
	extend: 'Ext.panel.Panel',
	alias: 'widget.highcharts.Donut',

	layout: 'fit',
	
	baseCls : Ext.baseCSSPrefix + 'highcharts-donut',

	initComponent: function(config)
	{
		var chartId = Ext.id();

		// Defaults
		var defaults = {
			chart: {
				renderTo: chartId,
				type: 'pie',
				backgroundColor: '#FFFFFF'
			},
			title: {
				text: ''
			},
			plotOptions: {
				pie: {
					shadow: false
				},
				series: {
					animation: {
						duration: 500
					}
				}
			},
			credits: {
				enabled: false
			},
			tooltip: {
				formatter: function() {
					return this.point.config.visible ? this.point.name + ': '+ this.y + ' %' : false;
				}
			},
			coreSerie: {
				name: 'Core',
				size: '60%',
				dataLabels: {
					formatter: function() {
						return this.y > 5 ? this.point.name : null;
					},
					color: 'white',
					distance: -30
				}
			},
			wrapperSerie: {
				name: 'Wrapper',
				innerSize: '60%',
				dataLabels: {
					formatter: function() {
						return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +' %' : null;
					}
				}
			}
		};

		// Merge the chart defaults and options
		this.config = Ext.Object.merge(defaults, this.config);

		this.html = '<div id="' + chartId + '"></div>';

		this.callParent(arguments);
	},

	update: function(data)
	{
		if (Ext.isDefined(this.chart)) this.chart.destroy();

		var coreData = [];
		var wrapperData = [];

		for (var i = 0; i < data.length; i++)
		{
			var coreItem = data[i];
			coreItem.subdata = coreItem.subdata || [];
			coreData.push({
				name: coreItem.name,
				y: coreItem.value,
				color: coreItem.color,
				visible: true
			});

			var subdataSum = 0;
			for (var j = 0; j < coreItem.subdata.length; j++)
			{
				var wrapperItem = coreItem.subdata[j];
				var brightness = (j + 1) / (5 * (coreItem.subdata.length + 1));
				wrapperData.push({
					name: wrapperItem.name,
					y: wrapperItem.value,
					color: Highcharts.Color(coreItem.color).brighten(brightness).get(),
					visible: true
				});
				subdataSum += wrapperItem.value;
			}

			// Complete wrapper with empty data
			wrapperData.push({
				name: '',
				y: Math.round(100 * (coreItem.value - subdataSum)) / 100,
				color: this.config.chart.backgroundColor,
				visible: false
			});
		}

		var config = Ext.clone(this.config);
		config.series = [
		    Ext.Object.merge(this.config.coreSerie, {data: coreData}),
		    Ext.Object.merge(this.config.wrapperSerie, {data: wrapperData})
		];
		delete config.coreSerie;
		delete config.wrapperSerie;

		// Create the chart
		this.chart = new Highcharts.Chart(config);
	}
});